<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优雅待办清单</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
      /* 全局样式 */
      :root {
        --primary-color: #4e54c8;
        --secondary-color: #8f94fb;
        --accent-color: #ff6b6b;
        --text-color: #333;
        --light-text: #777;
        --bg-color: #f9f9f9;
        --card-bg: #fff;
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        --border-radius: 12px;
        --transition: all 0.3s ease;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        color: var(--text-color);
      }

      /* 容器样式 */
      .todo-container {
        width: 100%;
        max-width: 600px;
        background: var(--card-bg);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      /* 头部样式 */
      .todo-header {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 30px;
        text-align: center;
        position: relative;
      }

      .todo-header h1 {
        font-size: 28px;
        margin-bottom: 10px;
        font-weight: 600;
      }

      .todo-header p {
        font-size: 16px;
        opacity: 0.8;
      }

      .date-display {
        margin-top: 15px;
        font-size: 14px;
        opacity: 0.9;
      }

      /* 输入区域样式 */
      .todo-input-wrapper {
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid #eee;
        position: relative;
      }

      .todo-input {
        width: 100%;
        padding: 15px 20px;
        border: 2px solid #eee;
        border-radius: 50px;
        font-size: 16px;
        transition: var(--transition);
        outline: none;
      }

      .todo-input:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(78, 84, 200, 0.2);
      }

      .add-btn {
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        cursor: pointer;
        transition: var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
      }

      .add-btn:hover {
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 5px 15px rgba(78, 84, 200, 0.3);
      }

      /* 过滤器样式 */
      .filters {
        display: flex;
        padding: 15px 20px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #eee;
      }

      .filter-btn {
        background: none;
        border: none;
        padding: 8px 15px;
        margin-right: 10px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 14px;
        color: var(--light-text);
        transition: var(--transition);
      }

      .filter-btn.active {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        box-shadow: 0 2px 8px rgba(78, 84, 200, 0.3);
      }

      .filter-btn:hover:not(.active) {
        background-color: #e9e9e9;
      }

      /* 待办事项列表样式 */
      .todo-list {
        max-height: 400px;
        overflow-y: auto;
        padding: 10px 0;
      }

      .todo-item {
        display: flex;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        animation: fadeIn 0.3s ease;
        transition: var(--transition);
      }

      .todo-item:hover {
        background-color: #f9f9f9;
      }

      .todo-item.completed {
        opacity: 0.7;
      }

      .todo-checkbox {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid #ddd;
        margin-right: 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition);
        flex-shrink: 0;
      }

      .todo-checkbox.checked {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border-color: var(--primary-color);
        color: white;
      }

      .todo-text {
        flex-grow: 1;
        font-size: 16px;
        transition: var(--transition);
      }

      .todo-item.completed .todo-text {
        text-decoration: line-through;
        color: var(--light-text);
      }

      .todo-actions {
        display: flex;
        margin-left: 10px;
      }

      .todo-btn {
        background: none;
        border: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--light-text);
        margin-left: 5px;
        transition: var(--transition);
      }

      .todo-btn:hover {
        background-color: #f0f0f0;
        color: var(--primary-color);
      }

      .todo-btn.delete-btn:hover {
        background-color: #ffebee;
        color: var(--accent-color);
      }

      /* 底部样式 */
      .todo-footer {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--light-text);
        font-size: 14px;
        border-top: 1px solid #eee;
      }

      .clear-completed {
        background: none;
        border: none;
        color: var(--accent-color);
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 4px;
        transition: var(--transition);
      }

      .clear-completed:hover {
        background-color: #ffebee;
      }

      /* 空状态样式 */
      .empty-state {
        padding: 40px 20px;
        text-align: center;
        color: var(--light-text);
      }

      .empty-state i {
        font-size: 50px;
        margin-bottom: 15px;
        opacity: 0.3;
      }

      .empty-state p {
        font-size: 16px;
        margin-bottom: 20px;
      }

      /* 编辑模式样式 */
      .edit-input {
        flex-grow: 1;
        padding: 8px 12px;
        border: 2px solid var(--primary-color);
        border-radius: 4px;
        font-size: 16px;
        outline: none;
      }

      /* 动画效果 */
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        50% { transform: translateX(5px); }
        75% { transform: translateX(-5px); }
      }

      .shake {
        animation: shake 0.4s ease;
      }

      /* 响应式设计 */
      @media (max-width: 600px) {
        .todo-container {
          border-radius: 0;
          height: 100vh;
          max-width: 100%;
        }
        
        .todo-header {
          padding: 20px;
        }
        
        .todo-header h1 {
          font-size: 24px;
        }
        
        .todo-input {
          padding: 12px 15px;
          font-size: 14px;
        }
        
        .add-btn {
          width: 35px;
          height: 35px;
        }
        
        .todo-list {
          max-height: calc(100vh - 250px);
        }
      }

      /* 自定义滚动条 */
      .todo-list::-webkit-scrollbar {
        width: 6px;
      }

      .todo-list::-webkit-scrollbar-track {
        background: #f1f1f1;
      }

      .todo-list::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 10px;
      }

      .todo-list::-webkit-scrollbar-thumb:hover {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="todo-container">
      <!-- 头部 -->
      <div class="todo-header">
        <h1>优雅待办清单</h1>
        <p>高效管理你的每日任务</p>
        <div class="date-display" id="date-display"></div>
      </div>
      
      <!-- 输入区域 -->
      <div class="todo-input-wrapper">
        <input type="text" class="todo-input" id="todo-input" placeholder="添加新的待办事项...">
        <button class="add-btn" id="add-btn">
          <i class="fas fa-plus"></i>
        </button>
      </div>
      
      <!-- 过滤器 -->
      <div class="filters">
        <button class="filter-btn active" data-filter="all">全部</button>
        <button class="filter-btn" data-filter="active">进行中</button>
        <button class="filter-btn" data-filter="completed">已完成</button>
      </div>
      
      <!-- 待办事项列表 -->
      <div class="todo-list" id="todo-list">
        <!-- 空状态 -->
        <div class="empty-state" id="empty-state">
          <i class="fas fa-clipboard-list"></i>
          <p>你的待办清单是空的</p>
          <p>添加一些任务开始你的一天吧！</p>
        </div>
        
        <!-- 待办事项将通过JavaScript动态添加 -->
      </div>
      
      <!-- 底部 -->
      <div class="todo-footer">
        <div class="todo-count" id="todo-count">0 个待办事项</div>
        <button class="clear-completed" id="clear-completed">清除已完成</button>
      </div>
    </div>

    <script>
      // 获取DOM元素
      const todoInput = document.getElementById('todo-input');
      const addBtn = document.getElementById('add-btn');
      const todoList = document.getElementById('todo-list');
      const emptyState = document.getElementById('empty-state');
      const todoCount = document.getElementById('todo-count');
      const clearCompletedBtn = document.getElementById('clear-completed');
      const filterBtns = document.querySelectorAll('.filter-btn');
      const dateDisplay = document.getElementById('date-display');
      
      // 初始化待办事项数组
      let todos = JSON.parse(localStorage.getItem('todos')) || [];
      let currentFilter = 'all';
      
      // 显示日期
      function updateDateDisplay() {
        const now = new Date();
        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        dateDisplay.textContent = now.toLocaleDateString('zh-CN', options);
      }
      
      // 保存待办事项到本地存储
      function saveTodos() {
        localStorage.setItem('todos', JSON.stringify(todos));
      }
      
      // 渲染待办事项列表
      function renderTodos() {
        // 清空列表
        const todoItems = document.querySelectorAll('.todo-item');
        todoItems.forEach(item => item.remove());
        
        // 过滤待办事项
        let filteredTodos = todos;
        if (currentFilter === 'active') {
          filteredTodos = todos.filter(todo => !todo.completed);
        } else if (currentFilter === 'completed') {
          filteredTodos = todos.filter(todo => todo.completed);
        }
        
        // 显示或隐藏空状态
        if (filteredTodos.length === 0) {
          emptyState.style.display = 'block';
        } else {
          emptyState.style.display = 'none';
        }
        
        // 渲染待办事项
        filteredTodos.forEach(todo => {
          const todoItem = document.createElement('div');
          todoItem.classList.add('todo-item');
          if (todo.completed) {
            todoItem.classList.add('completed');
          }
          
          const todoCheckbox = document.createElement('div');
          todoCheckbox.classList.add('todo-checkbox');
          if (todo.completed) {
            todoCheckbox.classList.add('checked');
            todoCheckbox.innerHTML = '<i class="fas fa-check"></i>';
          }
          
          const todoText = document.createElement('div');
          todoText.classList.add('todo-text');
          todoText.textContent = todo.text;
          
          const todoActions = document.createElement('div');
          todoActions.classList.add('todo-actions');
          
          const editBtn = document.createElement('button');
          editBtn.classList.add('todo-btn', 'edit-btn');
          editBtn.innerHTML = '<i class="fas fa-pen"></i>';
          
          const deleteBtn = document.createElement('button');
          deleteBtn.classList.add('todo-btn', 'delete-btn');
          deleteBtn.innerHTML = '<i class="fas fa-trash"></i>';
          
          todoActions.appendChild(editBtn);
          todoActions.appendChild(deleteBtn);
          
          todoItem.appendChild(todoCheckbox);
          todoItem.appendChild(todoText);
          todoItem.appendChild(todoActions);
          
          todoList.appendChild(todoItem);
          
          // 添加事件监听器
          todoCheckbox.addEventListener('click', () => {
            toggleTodo(todo.id);
          });
          
          editBtn.addEventListener('click', () => {
            editTodo(todo.id, todoItem, todoText);
          });
          
          deleteBtn.addEventListener('click', () => {
            deleteTodo(todo.id);
          });
        });
        
        // 更新计数
        const activeTodos = todos.filter(todo => !todo.completed);
        todoCount.textContent = `${activeTodos.length} 个待办事项`;
      }
      
      // 添加新的待办事项
      function addTodo() {
        const text = todoInput.value.trim();
        if (text === '') {
          // 输入为空时添加抖动效果
          todoInput.classList.add('shake');
          setTimeout(() => {
            todoInput.classList.remove('shake');
          }, 400);
          return;
        }
        
        const newTodo = {
          id: Date.now(),
          text,
          completed: false
        };
        
        todos.push(newTodo);
        saveTodos();
        todoInput.value = '';
        renderTodos();
      }
      
      // 切换待办事项的完成状态
      function toggleTodo(id) {
        todos = todos.map(todo => {
          if (todo.id === id) {
            return { ...todo, completed: !todo.completed };
          }
          return todo;
        });
        
        saveTodos();
        renderTodos();
      }
      
      // 编辑待办事项
      function editTodo(id, todoItem, todoText) {
        const todo = todos.find(todo => todo.id === id);
        if (!todo) return;
        
        // 创建编辑输入框
        const editInput = document.createElement('input');
        editInput.type = 'text';
        editInput.classList.add('edit-input');
        editInput.value = todo.text;
        
        // 替换文本为输入框
        todoItem.replaceChild(editInput, todoText);
        editInput.focus();
        
        // 处理编辑完成
        function finishEdit() {
          const newText = editInput.value.trim();
          if (newText) {
            todos = todos.map(t => {
              if (t.id === id) {
                return { ...t, text: newText };
              }
              return t;
            });
            
            saveTodos();
          }
          renderTodos();
        }
        
        // 添加事件监听器
        editInput.addEventListener('blur', finishEdit);
        editInput.addEventListener('keypress', e => {
          if (e.key === 'Enter') {
            finishEdit();
          }
        });
      }
      
      // 删除待办事项
      function deleteTodo(id) {
        todos = todos.filter(todo => todo.id !== id);
        saveTodos();
        renderTodos();
      }
      
      // 清除已完成的待办事项
      function clearCompleted() {
        todos = todos.filter(todo => !todo.completed);
        saveTodos();
        renderTodos();
      }
      
      // 切换过滤器
      function setFilter(filter) {
        currentFilter = filter;
        
        // 更新过滤器按钮状态
        filterBtns.forEach(btn => {
          if (btn.dataset.filter === filter) {
            btn.classList.add('active');
          } else {
            btn.classList.remove('active');
          }
        });
        
        renderTodos();
      }
      
      // 添加事件监听器
      addBtn.addEventListener('click', addTodo);
      
      todoInput.addEventListener('keypress', e => {
        if (e.key === 'Enter') {
          addTodo();
        }
      });
      
      clearCompletedBtn.addEventListener('click', clearCompleted);
      
      filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          setFilter(btn.dataset.filter);
        });
      });
      
      // 初始化
      updateDateDisplay();
      renderTodos();
      
      // 每分钟更新日期显示
      setInterval(updateDateDisplay, 60000);
    </script>
  </body>
</html>
